<template>
  <div>
    <div class="Home Home1">
      <div class="auto auto_1200">
        <div class="clear"></div>
        <dl>
          <dt></dt>
          <dd>
            <a href="/Content/List/eb887c88467f4189">
              <figure>
                <img
                  class="img1"
                  src="http://www.tianyaxunqin.com/Content/style/web/images/Home1_xr.png"
                />
                <img
                  class="img2"
                  src="http://www.tianyaxunqin.com/Content/style/web/images/Home1_xr_hover.png"
                />
              </figure>
              <h2>
                寻亲快捷入口
                <b>Tracing quick entry</b>
                <i></i>
              </h2>
              <p>
                天涯寻亲网正在以互联网的方式帮助那些失孤和他们的父母，我们会努力的帮助你们！
              </p>
            </a>
          </dd>
          <dd class="end">
            <a href="">
              <figure>
                <img
                  class="img1"
                  src="http://www.tianyaxunqin.com/Content/style/web/images/Home1_xs.png"
                />
                <img
                  class="img2"
                  src="http://www.tianyaxunqin.com/Content/style/web/images/Home1_xs_hover.png"
                />
              </figure>
              <h2>
                寻亲登记入口
                <b>Clues Quick entry</b>
                <i></i>
              </h2>
              <p>
                天涯寻亲网正在以互联网的方式帮助那些失孤和他们的父母，我们会努力的帮助你们！
              </p>
            </a>
          </dd>
        </dl>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Entrance",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
dl {
  overflow: hidden;
  margin: 41px 0;
  position: relative;
}
dt {
  width: 1px;
  height: 100%;
  background: #e0e0e0;
  position: absolute;
  left: 50%;
  top: 0;
}
dd {
  float: left;
  position: relative;
  padding-left: 213px;
  width: 271px;
}
dd.end {
  float: right;
  padding-right: 47px;
}
dd figure {
  position: absolute;
  left: 0;
  top: 0;
  text-align: right;
  width: 189px;
}
dd img {
  width: 137px;
  height: 137px;
}
dd img.img1 {
  display: inline-block;
}
dd img.img2 {
  display: none;
}
dd h2 {
  font-weight: normal;
  font-size: 18px;
  margin: 0;
}
dd h2 b {
  display: block;
  color: #666666;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
}
dd h2 i {
  display: block;
  width: 34px;
  height: 1px;
  background: #dedede;
  margin: 10px 0 20px;
}
dd p {
  color: #999999;
}
dd a:hover .img1 {
  display: none;
}
dd a:hover .img2 {
  display: inline-block;
}
</style>